<template>
    <div class="zh-404">
        <div class="mes">{{ mes }}</div>
        <div class="reason">{{ reason }}</div>
    </div>
</template>
<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRoute } from 'vue-router'

    const route = useRoute()
    const mes = route.query.mes || '404...'
    const reason = route.query.reason || '抱歉，页面无法访问'
</script>
<style lang="scss" scoped>
    .zh-404 {
        height:100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .mes {
            font-size:42px;
        }
        .reason {
            font-size:16px;
        }
    }
</style>